﻿@model  Authentication.Model.ViewModel.Account.UserViewModel
<ul class="breadcrumb">
    <li>
        <i class="icon-home"></i>
        <a href="/">Account</a>
        <i class="icon-angle-right"></i>
    </li>
    <li>
        <i class="icon-group"></i>
        <a href="#">Users</a>
    </li>
</ul>
<!--/span-->

<div class="row-fluid">
    <div class="box span12">
        <div class="box-header" data-original-title>
            <h2><i class="halflings-icon th-large"></i><span class="break"></span>User items</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
            </div>
        </div>
        <div class="box-content">
            <table class="table table-striped bootstrap-datatable datatable" id="dataTables-1">
                <thead>
                    <tr>
                        <th class="text-left all">User</th>
                        <th class="text-left">Email</th>
                        <th class="text-left">First Name</th>
                        <th class="text-left">Last Name</th>
                        <th class="text-left">Mobile</th>
                        <th class="text-left never">Active</th>
                        <th class="text-left all" style="width: 60px;">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            @if (Model.IsSupperAdmin)
            {
                <div class="form-actions">
                    <button id="btnNewUser" class="btn btn-success btn-responsive"><i class="icon-plus"></i>Add New User</button>
                </div>
            }
        </div>
    </div>
    <!--/span-->
</div>
<!--/row-->
@if (true)
{
    <div id="userEditor" class="modal fade box brown">
        <div class="box-header">
            <h2><i class="halflings-icon white list"></i><span class="break"></span>User Confirmation</h2>
            <div class="box-icon">
                <a data-dismiss="modal" class="close"><i class="halflings-icon white remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            @using (Html.BeginForm("Users", "Account", FormMethod.Post, new { @class = "form-horizontal", name = "Update", id = "Update" }))
            {
                <div class="validation-summary alert alert-error">
                    <a class="close" data-dismiss="alert">×</a>
                    <h5 class="alert-heading">User validation</h5>
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary()
                </div>
                <fieldset>
                    <div class="control-group">
                        @Html.LabelFor(m => m.GroupIdentifier, new { @class = "control-label" })
                        <div class="controls">
                            @Html.DropDownListFor(m => m.GroupIdentifier, new SelectList(Model.Groups, "GroupIdentifier", "GroupName"), "-- Select group --", new { @class = "span10" })
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.UserName, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.UserName, new { @class = "span10" })
                            @Html.Hidden("btnClick")
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.Email, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.Email, new { @class = "span10" })
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.FirstName, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.FirstName, new { @class = "span10" })
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.LastName, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.LastName, new { @class = "span10" })
                        </div>
                    </div>
                    <div class="control-group">
                        @Html.LabelFor(m => m.Mobile, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.Mobile, new { @class = "span10" })
                        </div>
                    </div>
                    <div class="form-actions modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" name="btnUpdate" id="btnUpdate" class="btn btn-primary" value="Save changes" />
                    </div>
                </fieldset>
            }
        </div>
    </div>
}

@section scripts
{
    <script>
        $(document).ready(function () {
            var table = $('#dataTables-1').dataTable({
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                oLanguage: {
                    sProcessing: "<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif'/>"
                },
                "bAutoWidth": false,
                "aLengthMenu": [10, 30, 50, 100],
                "pageLength": 30,
                "sAjaxSource": '@Url.Action("UsersData")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "bootstrap",//"full_numbers",
                "aoColumns": [
                            { "sName": "Mobile", "bSortable": false },
                            { "sName": "UserName", "bSortable": false },
                            { "sName": "Email", "bSortable": false },
                            { "sName": "FirstName", "bSortable": false },
                            { "sName": "LastName", "bSortable": false },
                            { "sName": "Active", "bSortable": false },
                            { "sName": "GroupIdentifier", "bSortable": false }],
                "aoColumnDefs": [{
                    "aTargets": [6],
                    "mData": null,
                    "mRender": function (data, type, full) {
                        var iconClass = "eye-open", btnClass = "btn-primary";
                        if (!full[5]) {
                            iconClass = "eye-close";
                            btnClass = "btn-danger";
                        }
                        return '<button class=\"btn btn-small btn-success\" onclick=\"showUserEditor(\'' + full[6] + '\',\'' + full[0] + '\',\'' + full[1] + '\',\'' + full[2] + '\',\'' + full[3] + '\',\'' + full[4] + '\',' + full[5] + ');\"><i class=\"halflings-icon white edit\"></i></button> <button class=\"btn btn-small ' + btnClass + '\" onclick=\"activeUser(\'' + full[0] + '\',' + full[5] + ');\"><i class=\"halflings-icon white ' + iconClass + '\"></i></button>';
                    }
                }]
            });
        });
    </script>

    @*Check permission*@
    @if (true)
    {
        <script type="text/javascript">
            function showUserEditor(group, username, email, firstname, lastname, mobile, active) {
                $('#UserName').val(username);
                $('#Email').val(email);
                $('#FirstName').val(firstname);
                $('#LastName').val(lastname);
                $('#Mobile').val(mobile);
                $('#GroupIdentifier').val(group);
                $("#userEditor").modal('show');
            }

            function activeUser(id, active) {
                var confirmText = 'The selected user will be disabled, are you really?';
                if (!active) confirmText = 'The selected user will be enabled, are you really?';
                ConfirmDlg('Active user!', confirmText, doActive = function () {
                    $.post('@Authentication.Configuration.SystemConfiguration.ActiveUserAction/', { code: id, active: active }, function (data) {
                        if (data.IsSuccess) document.location = '/account/users';
                        else alert(data.ErrorMessage);
                    });
                });
            }

            $("#btnNewUser").click(function () {
                showUserEditor(null, null, null, null, null, null);
                $('#btnClick').val('btnNewUser');
            });
        </script>
    }
}